<template>


	<v-touch  
		v-on:pinchstart="start"
		v-on:pinchend="end"
		v-on:pinchmove="move"
	>

		<div class="dlq h1">{{bili}}</div>
	</v-touch>
  		
</template>

<script>

import { mapGetters } from 'vuex';

export default {
	name: 'touch',
		data () {
		return {
		  	pointer1 : {
		  		x : 0,
		  		y : 0,
		  	},
		  	pointer2 : {
		  		x : 0,
		  		y : 0,
		  	},


		  	x1 : 0,
		  	y1 : 0,

		  	x2 : 0,
		  	y2 : 0,

		  	d : 0,

		  	bili : 0.0,
		}
	},

	components: {

		
	},

	computed : {
		...mapGetters([
			'company_code', 
			'userdata',
		]),
	},

	methods : {
	
		start (data) {
			console.log('start');
			console.log(data);

			this.x1 = data.pointers[0].clientX;
			this.y1 = data.pointers[0].clientY;

			this.x2 = data.pointers[1].clientX;
			this.y2 = data.pointers[1].clientY;

			this.d = Math.sqrt(Math.pow((this.x1 - this.x2), 2) + Math.pow((this.y1 - this.y2), 2));
			
		},

		end (data) {
			console.log('end');
			console.log(data);
		},


		move (data) {
			console.log('move');
			console.log(data);

			var x1 = data.pointers[0].clientX;
			var y1 = data.pointers[0].clientY;

			var x2 = data.pointers[1].clientX;
			var y2 = data.pointers[1].clientY;


			var d = Math.sqrt(Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2));


			this.bili = d / this.d;
			
		}
	},

	watch:{
	    
	},

	mounted () {
		
		
	},

}
</script>

<style scoped>
.dlq {
	width: 100%;
	height: 600px;
}
</style>
